<template>
  <div class="parent">
    <!-- 用户 -->
    <div class="parent_user">
      <div class="user_img">
        <img
          v-if="parent.account.defaultAvatar"
          :src="$axios.defaults.baseURL + parent.account.defaultAvatar"
          alt
        />
        <img v-else src="@/assets/img/pic_sea.jpeg" alt />
      </div>
      <span class="user_nickname">{{parent.account.nickname}}</span>
      <p class="time">
        <span>{{timeYears}}</span>
        <span>{{timeMinute}}</span>
      </p>
    </div>

    <!-- 递归自调用 -->
    <parent v-if="parent.parent" :parent="parent.parent" @commentReply="parentReply"></parent>
    <!-- 递归自调用 -->

    <!-- 主体内容 -->
    <div class="parent_main">
      <p class="parent_text">{{parent.content}}</p>
      <div class="parent_main_img">
        <!-- 图片预览组件 -->
        <el-image
          v-for="(item,index) of parent.pics"
          :key="index"
          style="width: 100px; height: 100px"
          :src="''+$axios.defaults.baseURL + item.url"
          :preview-src-list="initImgUrl"
        ></el-image>
      </div>
    </div>

    <div class="reply" @click="parentReply(parent)">回复</div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: ["parent"],
  name: "parent",
  computed: {
    // 时间函数
    timeYears() {
      const years = moment(this.parent.created_at).format("YYYY-MM-DD");
      return years;
    },
    timeMinute() {
      const minute = moment(this.parent.created_at).format("HH:mm");
      return minute;
    },
    // el-image 图片 路径初始化
    initImgUrl() {
      return this.parent.pics.map(item => {
        return "" + this.$axios.defaults.baseURL + item.url;
      });
    }
  },
  methods: {
    parentReply(obj) {
      this.$emit("commentReply", obj);
    }
  }
};
</script>

<style lang="less" scoped>
.parent {
  background: #f9f9f9;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  position: relative;
  // box-sizing: border-box;
}
.parent_user {
  display: flex;

  font-size: 12px;
  .user_img {
    width: 16px;
    height: 16px;
    padding: 0 8px;
    img {
      width: 100%;
      height: auto;
    }
  }
  .time {
    padding: 0 5px;
    color: #999999;
  }
}
.parent_main {
  .parent_text {
    padding: 10px;
  }
  // 图片
  /deep/ .el-image {
    width: 80px !important;
    height: 80px !important;
    padding: 5px;
    margin: 0 3px;
    border: 1px dashed #ddd;
    /deep/ img {
      width: 100%;
      height: 100%;
    }
  }
}
// 回复
.reply {
  display: block;
  cursor: pointer;
  font-size: 12px;
  color: #1e50a2;
  position: absolute;
  right: 20px;
  bottom: 10px;
}
</style>